<template>
	<span>
		<el-table
			:border="isBorder ? true : false"
			:data="rows"
			:empty-text="tableEmptyText"
			:id="tableId"
			@select="selectFunc"
			@select-all="defaultSelectAll"
			@selection-change="defaultSelelctChange"
			@sort-change="defaultSortChange"
			class="list"
			highlight-current-row
			ref="table"
			style="width: 100%"
			tooltip-effect="dark"
		>
			<el-table-column :type="selection" id="row-checkbox" v-if="selection !== 'none'" width="55"/>

			<template v-for="column in columns">
				<el-table-column
					:align="column.align"
					:key="column.prop"
					:label="column.label"
					:prop="column.prop"
					:show-overflow-tooltip="true"
					:width="column.width ? column.width : 120"
					v-if="!column.operations"
				>
					<template slot-scope="scope">
						<span v-if="column.edit == 'input'">
							<el-input :type="column.type" v-model="scope.row[column.prop]"/>
						</span>
						<span v-else>{{ onFormatter(column.prop, scope.row[column.prop], scope.row) }}</span>
					</template>
				</el-table-column>
				<el-table-column
					:key="column.label"
					:label="column.label"
					:show-overflow-tooltip="true"
					:width="column.width"
					v-else-if="column.operations"
				>
					<template slot-scope="scope">
						<div class="option">
							<div
								:key="oper.label"
								@click="() => defaultOperation(oper, scope.row)"
								class="option-item hand gray-hover"
								v-for="oper in column.operations"
								v-has="oper.auId"
							>
								<i :class="oper.icon"/>
								<span>{{oper.label}}</span>
							</div>
						</div>
					</template>
				</el-table-column>
			</template>
		</el-table>
		<div class="table-footer" v-if="!isFooter">
			<div class="options-content">
				<el-dropdown @command="defaultOption" size="mini" split-button type="primary" v-if="options">
					选择操作
					<el-dropdown-menu slot="dropdown" v-if="options">
						<el-dropdown-item :command="option.value" :key="option.value" v-for="option in options">{{option.label}}</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>

			<div class="page-view" v-if="total">
				<el-pagination :total="total" @current-change="defaultCurrentChange" background layout="total, prev, pager, next"/>
			</div>
		</div>
	</span>
</template>

<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'

export default {
  name: 'tableEx',
  props: {
    // 主要用于导出Excel
    tableId: null,
    rows: null,
    total: null,
    columns: null,
    emptyText: null,
    formatter: null,
    options: null,
    selectChange: null,
    onSelectAll: null,
    sortChange: null,
    onOption: null,
    onOperation: null,
    onSelectChange: null,
    onPageChange: null,
    onSelect: null,
    isFooter: true,
    isBorder: false,
    selection: {
      type: String,
      default: 'selection'
    }
  },
  data() {
    return {
      tableEmptyText: this.emptyText ? this.emptyText : '暂无数据',
      multipSelection: []
    }
  },
  computed: {
    selectFunc() {
      console.log('selectFunc >> ', this.selection)
      return this.selection !== 'none' ? this.defaultSelect : ''
    }
  },
  created() {},
  mounted() {
    console.log('table-ex >>>>> ', this.columns, this.selection)
  },
  methods: {
    defaultSelect(selection, row) {
      this.onSelect && this.onSelect(selection, row)
    },
    defaultSelectAll(selection) {
      this.onSelectAll && this.onSelectAll(selection)
    },
    defaultSelelctChange(row) {
      this.multipSelection = row
      this.onSelectChange && this.onSelectChange(row)
    },
    defaultSortChange(row) {
      if (this.sortChange) this.sortChange(row)
    },
    defaultOption(option) {
      if (this.onOption) this.onOption(option, this.multipSelection)
    },
    defaultOperation(oper, row) {
      if (this.onOperation) this.onOperation(oper, row)
    },
    defaultCurrentChange(page) {
      if (this.onPageChange) this.onPageChange(page)
    },
    toggleSelection(row) {
      this.$refs.table.toggleRowSelection(row, true)
    },

    onFormatter(prop, data, row) {
      if (this.formatter) return this.formatter(prop, data, row)
      if (prop === 'enabled') return data ? '是' : '否'
      return data
    },

    onInputChange(row, prop, value) {
      console.log('onInputChange >> ', row, prop, value)
      row[prop] = value
    },

    // 导出excel表格
    exportExcel() {
      if (this.tableId) {
        let wb = XLSX.utils.table_to_book(
          document.querySelector(`#${this.tableId}`)
        )
        let results = XLSX.write(wb, {
          bookType: 'xlsx',
          bookSST: true,
          type: 'array'
        })
        try {
          FileSaver.saveAs(
            new Blob([results], {
              type: 'application/octet-stream'
            }),
            `${this.tableId}.xlsx`
          )
        } catch (e) {
          if (typeof console !== 'undefined') console.log(e, results)
        }
        return results
      } else {
        throw new Error('请设置table表格的table-id属性')
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.list {
  margin-top: 15px;
  .option {
    display: flex;
    flex-direction: row;
    align-items: center;
    .option-item {
      margin-left: 5px;
      border-radius: 2px;
    }
  }
}
.table-footer {
  height: 6vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: transparent !important;
}
</style>

